<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索可回收物" :show-action="false" shape="square" clearabled
						@change="searchKey"></u-search>
				</view>
			</view>
		</view>
		<view class="u-p-15">
			<text class="u-font-24 u-tips-color">左滑查看完整表格信息</text>
		</view>
		<scroll-view scroll-x="true" class="u-border-top">
			<view class="table-list">
				<view class="tr head u-border-bottom">
					<view class="th"><text>类型</text></view>
					<view class="th"><text>可回收物</text></view>
					<view class="th u-text-center"><text>上门回收价格</text></view>
					<view class="th u-text-center"><text>站点回收价格</text></view>
					<view class="th u-text-center"><text>预估出库价</text></view>
					<view class="th u-text-center last"><text>操作</text></view>
				</view>
				<view class="tr u-border-bottom" v-for="(item,index) in tableData" :key="index">
					<view class="td">
						<text class="bold">{{item.large}}</text>
					</view>
					<view class="td">
						<text>{{item.name}}</text>
					</view>
					<view class="td u-text-center">
						<text class="bold">{{item.onsiteprice}}</text><text class="u-font-24">元/KG</text>
					</view>
					<view class="td u-text-center">
						<text class="bold">{{item.storeprice}}</text><text class="u-font-24">元/KG</text>
					</view>
					<view class="td u-text-center">
						<text class="bold">{{item.packprice}}</text><text class="u-font-24">元/KG</text>
					</view>
					<view class="td u-text-center last">
						<text class="links u-font-24" @click="edit(item)">修改</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部按钮 -->
		<!-- <view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<text class="u-color-main" @click="back">返回</text>
						<view class="u-flex-1">
						</view>
						<u-button type="primary" size="medium" @click="submitBatch">提交价格修改</u-button>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tableData: [],
				originalTableData: [],
				key: '',
				form: {
					"typeid": 0,
					"id": 0,
					"name": "",
					"carbon": null,
					"pic": "",
					"sort": null,
					"packprice": null,
					"isweighing": true,
					"onsiteprice": {
						"edit": true,
						"price": null,
						"minprice": null,
						"highprice": null
					},
					"storeprice": {
						"edit": true,
						"price": null,
						"minprice": null,
						"highprice": null
					},
					"estimatedweight": null
				},
			}
		},
		onShow() {
			this.getList()
		},
		computed: {
			...mapState({
				franchiseId: state => state.franchiseId,
				operatorid: state => state.operatorid
			}),
			// 是否运营商管理员
			isOperatorAdmin() {
				return this.userdetail.bindinfo.operatorlist.find((item) => item.id == this.operatorid).ismanager
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getList() {
				this.tableData = []
				this.$u.get('/Waste/Price/Overview', {
					operatorid: this.operatorid
				}).then(res => {
					console.log(res)
					// this.tableData = res

					// let arr = []
					// res.type.forEach(item => {
					// 	item.product.forEach(i => {
					// 		let obj = {}
					// 		obj.large = item.typenames || item.name
					// 		obj.name = i.name
					// 		obj.price = i.price
					// 		obj.id = i.id
					// 		arr.push(obj)
					// 	})
					// });
					// this.tableData = arr

					this.tableData = this.flattenData(res.type)
					this.originalTableData = this.flattenData(res.type)
					this.loading = false
				})
			},
			// 递归数据处理
			flattenData(data, level = 0, parentPath = []) {
				let result = [];
				data.forEach(item => {
					const currentPath = [...parentPath, item];
					item.product.forEach(product => {
						result.push({
							...product,
							id: product.id,
							name: product.name,
							onsiteprice: product.onsiteprice,
							storeprice: product.storeprice,
							packprice: product.packprice,
							large: item.name,
							typeid: item.id,
							level: level,
							isCategory: true,
						});
					})
					// 递归处理子类型
					if (item.type && item.type.length > 0) {
						// console.log(currentPath)
						const childData = this.flattenData(item.type, level + 1, currentPath);
						console.log('递归处理子类型-childData:', childData)
						childData.forEach((cell) => {
							result = result.concat([{
								...cell,
								id: cell.id,
								name: `${cell.large}-${cell.name}`,
								// name: this.getSubCategoryName(currentPath),
								onsiteprice: cell.onsiteprice,
								storeprice: cell.storeprice,
								large: currentPath[0].name,
								typeid: currentPath[0].id,
								level: cell.level,
								isCategory: cell.isCategory,
							}]);
						})

					}
				})
				return result;
			},
			// 发起修改
			edit(obj) {
				this.form = {
					id: obj.id,
					typeid: obj.typeid,
					name: obj.name,
					typename: obj.typename,
					carbon: obj.carbon,
					isweighing: obj.isweighing,
					sort: obj.sort,
					packprice: obj.packprice,
					onsiteprice: {
						edit: obj.editonsiteprice,
						price: obj.onsiteprice,
						minprice: obj.onsiteminprice,
						highprice: obj.onsitehighprice
					},
					storeprice: {
						edit: obj.editstoreprice,
						price: obj.storeprice,
						minprice: obj.storeminprice,
						highprice: obj.storehighprice
					},
					estimatedweight: obj.estimatedweight,
					remarks: obj.remarks,
					usestate: obj.usestate,
					hasTypeId: this.typeId
				}
				this.$store.commit('setProductItem', this.form)
				uni.navigateTo({
					url: '/pages/admin/productList/edit/edit'
				})
				// this.show = true
			},
			searchKey() {
				if (!this.key) {
					// 如果搜索关键词为空，显示所有数据
					this.tableData = this.originalTableData;
					return;
				}

				const searchKey = this.key.toLowerCase().trim();

				// 支持多个字段的搜索
				this.tableData = this.originalTableData.filter((item) => {
					// 搜索可回收物名称
					if (item.name && item.name.toLowerCase().includes(searchKey)) {
						return true;
					}

					// 搜索类型名称
					if (item.large && item.large.toLowerCase().includes(searchKey)) {
						return true;
					}

					// 可以扩展搜索其他字段
					return false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-list {
		background-color: #fff;
		padding: 0 20rpx;
		width: 1100rpx;

		.head {
			// position: sticky;
			// z-index: 999;
			// top: 0;
			background-color: #fff;
		}

		.last {
			position: sticky;
			right: 0;
			background: #fff;
			box-shadow: -2px 1px 5px 0 rgb(0 0 0 / 10%);
			flex: 1 !important
		}

		.tr {
			display: flex;
			align-items: center;

			&:active {
				opacity: 0.6;
			}

			.th {
				flex: 2;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}

			.td {
				flex: 2;
				padding: 24rpx 0;
			}
		}

		.links {
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}

		.divider {
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}

		.table-th-middle {
			.td {
				padding: 10rpx 0;
				border-bottom: 1px solid $u-border-color;
			}
		}
	}
</style>